<template>
    <main class="main-page"  id="">
        <template v-if="pageReady">
            <section class="page-section " >
                <div class="container">
                    <div class="grid ">
                        <div  class="col comp-grid" >
                            <div >
                                <div class="mb-4 card surface-100">
                                    <div class="grid align-items-center">
                                        <div class="col-fixed" style="width:180x">
                                            <image-viewer class="border-round" style="max-width:100%;max-height:100px" width="auto" height="auto" image-size="medium" :src="auth.userPhoto" />
                                        </div>
                                        <div class="col">
                                            <div class="text-3xl font-bold text-primary"> {{ auth.userName }} </div>
                                            <div class="text-gray-500"> {{ auth.userEmail }} </div>
                                            <div class="text-sm text-500 text-capitalize pt-1" v-if="auth.userRole">{{ auth.userRole}}</div>
                                        </div>
                                    </div>
                                </div>
                                <TabView v-model:activeIndex="activeTab">
                                    <TabPanel>
                                        <template #header>
                                            <i class="pi pi-user mr-2"></i>
                                            <span>{{ $t('accountDetail') }}</span>
                                        </template>
                                        <div class="p-4">
                                            <!-- Basic Info Section -->
                                            <div class="mb-4">
                                                <div class="text-lg font-semibold mb-3 flex align-items-center">
                                                    <i class="pi pi-user mr-2 text-primary"></i>
                                                    <span>{{ $t('basicInformation') }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-hashtag mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('userId') }}:</span>
                                                    <span class="font-semibold">{{ item.user_id }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-user mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('username') }}:</span>
                                                    <span class="font-semibold">{{ item.username }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-id-card mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('name') }}:</span>
                                                    <span class="font-semibold">{{ item.name }}</span>
                                                </div>
                                                <div class="flex align-items-center pl-1">
                                                    <i class="pi pi-briefcase mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('personnelId') }}:</span>
                                                    <span class="font-semibold">{{ item.personnel_id }}</span>
                                                </div>
                                            </div>

                                            <Divider />

                                            <!-- Contact Info Section -->
                                            <div class="my-4">
                                                <div class="text-lg font-semibold mb-3 flex align-items-center">
                                                     <i class="pi pi-phone mr-2 text-primary"></i>
                                                     <span>{{ $t('contactInformation') }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-phone mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('phoneNumber') }}:</span>
                                                    <span class="font-semibold">{{ item.phone_number }}</span>
                                                </div>
                                                <div class="flex align-items-center pl-1">
                                                    <i class="pi pi-envelope mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('email') }}:</span>
                                                    <span class="font-semibold">{{ item.email }}</span>
                                                </div>
                                            </div>

                                            <Divider />

                                            <!-- Account Info Section -->
                                            <div class="mt-4">
                                                <div class="text-lg font-semibold mb-3 flex align-items-center">
                                                    <i class="pi pi-cog mr-2 text-primary"></i>
                                                    <span>{{ $t('accountInformation') }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1" v-if="item.ethereum_address">
                                                    <i class="pi pi-link mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('ethereumAddress') }}:</span>
                                                    <span class="font-semibold overflow-hidden text-overflow-ellipsis white-space-nowrap" style="max-width: 350px;" :title="item.ethereum_address">{{ item.ethereum_address }}</span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-verified mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('userRoleId') }}:</span>
                                                    <span class="font-semibold">
                                                        <Button class="p-button-text p-0 ml-1 vertical-align-middle" icon="pi pi-eye" :label="$t('rolesDetail')" v-if="item.user_role_id" @click="app.openPageDialog({ page: 'roles/view', url: `/roles/view/${item.user_role_id}` , closeBtn: true })" />
                                                    </span>
                                                </div>
                                                <div class="flex align-items-center mb-3 pl-1">
                                                    <i class="pi pi-calendar-plus mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('createdAt') }}:</span>
                                                    <span class="font-semibold">{{ utils.humanDatetime(item.created_at) }}</span>
                                                </div>
                                                <div class="flex align-items-center pl-1">
                                                    <i class="pi pi-calendar-edit mr-2 text-sm text-500"></i>
                                                    <span class="text-500 mr-2 text-sm">{{ $t('updatedAt') }}:</span>
                                                    <span class="font-semibold">{{ utils.humanDatetime(item.updated_at) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </TabPanel>
                                    <TabPanel>
                                        <template #header>
                                            <i class="pi pi-pencil  mr-2"></i>
                                            <span>{{ $t('editAccount') }}</span>
                                        </template>
                                        <div class="reset-grid">
                                            <account-edit-page is-sub-page></account-edit-page>
                                            </div>
                                        </TabPanel>
                                        <TabPanel>
                                            <template #header>
                                                <i class="pi pi-lock  mr-2"></i>
                                                <span>{{ $t('changePassword') }}</span>
                                            </template>
                                            <div class="reset-grid">
                                                <change-password-page is-sub-page></change-password-page>
                                            </div>
                                        </TabPanel>
                                    </TabView>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </template>
            <template v-if="loading">
                <div style="min-height:200px" class="flex gap-3 justify-content-center align-items-center p-3">
                    <div><ProgressSpinner style="width:50px;height:50px" /> </div>
                    <div class="text-500">{{ $t('loading') }} </div>
                </div>
            </template>
        </main>
</template>
<script setup>
	import {  ref, toRefs, onMounted, computed } from 'vue';
	import { useApp } from 'src/composables/app.js';
	import { useAuth } from 'src/composables/auth';
	import { $t } from 'src/services/i18n';
	import  AccountEditPage  from "./accountedit.vue";
	import  ChangePasswordPage  from "./changepassword.vue";
	import { useViewPage } from 'src/composables/viewpage.js';
	import { usePageStore } from 'src/store/page';
	import { utils } from 'src/utils';
	import Divider from 'primevue/divider';
	const props = defineProps({
		id: [String, Number],
		primaryKey: {
			type: String,
			default: 'user_id',
		},
		pageStoreKey: {
			type: String,
			default: 'ACCOUNT',
		},
		pageName: {
			type: String,
			default: 'users',
		},
		routeName: {
			type: String,
			default: 'usersaccountview',
		},
		apiPath: {
			type: String,
			default: 'account',
		},
		autoLoad: {
			type: Boolean,
			default: true,
		},
		titleBeforeDelete: {
			type: String,
			default: $t('deleteRecord'),
		},
		msgBeforeDelete: {
			type: String,
			default: () => $t('promptDeleteRecord'),
		},
		msgAfterDelete: {
			type: String,
			default: () => $t('recordDeletedSuccessfully'),
		},
		exportButton: {
			type: Boolean,
			default: true,
		},
		showHeader: {
			type: Boolean,
			default: true,
		},
		showFooter: {
			type: Boolean,
			default: true,
		},
		isSubPage: {
			type : Boolean,
			default : false,
		},
	});
	const store = usePageStore(props.pageStoreKey);
	const app = useApp(props);
	const auth = useAuth();
	const page = useViewPage({ store, props });
	const activeTab = ref(0);
	const { currentRecord } = toRefs(store.state);
	const { loading, pageReady } = toRefs(page.state);
	const item = currentRecord;
	const { load, deleteItem, } = page.methods;

	function getActionMenuModel(data){
		return [
		{
			label: () => $t('edit'),
			command: (event) => { app.openPageDialog({ page:'users/edit', url: `/users/edit/${data.user_id}`, closeBtn: true }) },
			icon: "pi pi-pencil",
			visible: auth.canView('users/edit')
		},
		{
			label: () => $t('delete'),
			command: (event) => { deleteItem(data.user_id) },
			icon: "pi pi-trash",
			visible: auth.canView('users/delete')
		}
	]
	}
	onMounted(()=>{
		const pageTitle = $t('myAccount');
		app.setPageTitle(props.routeName, pageTitle); // set browser page title
	});
</script>
<style scoped>
</style>
